<template>
  <div class="SD">
    <!--顶部标题-->
    <div class="content-top">
      <span>调休管理</span>
    </div>
    <!--左边二级侧边栏-->
    <div class="content-left active">
      <div class="menu-item">
        <router-link to="/breakoff/continued">连休</router-link>
      </div>
      <div class="menu-item">
        <router-link to="/breakoff/SD">员工换班</router-link>
      </div>
      <div class="menu-item">
        <router-link to="/breakoff/overtime">加班申请</router-link>
      </div>
    </div>
    <!--右边内容-->
    <div class="content-right active">
      <div class="content-content">
        <div class="default-tabs">
          <el-tabs
            v-model="activeName"
            type="card"
            mode="horizontal"
            @tab-click="loadData"
          >
            <el-tab-pane label="我申请的" name="1" />
            <el-tab-pane label="我审批的" name="2" />
            <el-tab-pane label="抄送我的" name="3" />
            <el-tab-pane label="我管辖的" name="4" />
          </el-tabs>
          <div class="view-content">
            <div class="content-content-right">
              <!--我申请的 Apply-->
              <div v-if="activeName == 1" class="apply">
                <div class="content-head">
                  <!-- <div class="input-item fl flex flex-y-center">
                            <span class="span-title fl">选择类型：</span>
                            <span class="span-input fl">
                                <el-select v-model="Apply.tableConfig.pparams.name" placeholder="请选择类型">
                                    <el-option
                                    v-for="item in Apply.typesOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </span>
                        </div> -->
                  <div class="input-item fl flex flex-y-center">
                    <span class="span-title fl">选择状态：</span>
                    <span class="span-input fl">
                      <el-select
                        v-model="Apply.tableConfig.params.auditStatus"
                        placeholder="请选择状态"
                      >
                        <el-option
                          v-for="item in statusOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </span>
                  </div>
                  <div class="input-item fl flex flex-y-center">
                    <span class="span-title fl">提交时间：</span>
                    <span class="span-input fl">
                      <el-date-picker
                        v-model="Apply.tableConfig.paramsTmp.date"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      >
                      </el-date-picker>
                    </span>
                  </div>
                  <div class="input-item fl">
                    <span class="span-input fl">
                      <el-button
                        type="primary"
                        @click="
                          () => {
                            ;(Apply.isLoad = false), loadData()
                          }
                        "
                        >查询</el-button
                      >
                    </span>
                  </div>
                  <!-- <div class="input-item fr">
                            <span class="span-input fl">
                            <el-button type="primary" @click="ApplySearch">导出</el-button>
                            </span>
                        </div> -->
                  <div class="input-item fr">
                    <span class="span-input fl">
                      <el-button
                        style="background-color: #9c0; color: #fff; border-color: #9c0;"
                        @click="FnApply"
                        >申请</el-button
                      >
                    </span>
                  </div>
                </div>
                <div class="content-table">
                  <Table
                    ref="Table"
                    :atone="false"
                    :columns="Apply.tableConfig.columns"
                    :url="Apply.tableConfig.url"
                    :pparams="Apply.tableConfig.pparams"
                    @tableBubbling="TableBubbling"
                  ></Table>
                </div>
              </div>
              <!--我审批的 Approval-->
              <div v-if="activeName == 2" class="approval">
                <div class="content-head">
                  <!-- <div class="input-item fl flex flex-y-center">
                            <span class="span-title fl">选择类型：</span>
                            <span class="span-input fl">
                                <el-select v-model="Apply.tableConfig.pparams.name" placeholder="请选择类型">
                                    <el-option
                                    v-for="item in Apply.typesOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </span>
                        </div> -->
                  <div class="input-item fl flex flex-y-center">
                    <span class="span-title fl">选择状态：</span>
                    <span class="span-input fl">
                      <el-select
                        v-model="Approval.tableConfig.params.auditStatus"
                        placeholder="请选择状态"
                      >
                        <el-option
                          v-for="item in statusOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </span>
                  </div>
                  <div class="input-item fl flex flex-y-center">
                    <span class="span-title fl">提交时间：</span>
                    <span class="span-input fl">
                      <el-date-picker
                        v-model="Approval.tableConfig.paramsTmp.date"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      >
                      </el-date-picker>
                    </span>
                  </div>
                  <div class="input-item fl">
                    <span class="span-input fl">
                      <el-button
                        type="primary"
                        @click="
                          () => {
                            ;(Approval.isLoad = false), loadData()
                          }
                        "
                        >查询</el-button
                      >
                    </span>
                  </div>
                  <!-- <div class="input-item fr">
                            <span class="span-input fl">
                            <el-button type="primary" @click="ApplySearch">导入</el-button>
                            </span>
                        </div> -->
                  <!-- <div class="input-item fr">
                            <span class="span-input fl">
                            <el-button type="primary" @click="ApplySearch">导出</el-button>
                            </span>
                        </div> -->
                </div>
                <div class="content-table">
                  <Table
                    ref="Table"
                    :atone="false"
                    :columns="Approval.tableConfig.columns"
                    :url="Approval.tableConfig.url"
                    :pparams="Approval.tableConfig.pparams"
                    @tableBubbling="TableBubbling"
                  ></Table>
                </div>
              </div>
              <!--抄送我的 CC-->
              <div v-if="activeName == 3" class="cc">
                <div class="content-head">
                  <!-- <div class="input-item fl flex flex-y-center">
                            <span class="span-title fl">选择类型：</span>
                            <span class="span-input fl">
                                <el-select v-model="Apply.tableConfig.pparams.name" placeholder="请选择类型">
                                    <el-option
                                    v-for="item in Apply.typesOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </span>
                        </div> -->
                  <div class="input-item fl flex flex-y-center">
                    <span class="span-title fl">选择状态：</span>
                    <span class="span-input fl">
                      <el-select
                        v-model="CC.tableConfig.params.auditStatus"
                        placeholder="请选择状态"
                      >
                        <el-option
                          v-for="item in statusOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </span>
                  </div>
                  <div class="input-item fl flex flex-y-center">
                    <span class="span-title fl">提交时间：</span>
                    <span class="span-input fl">
                      <el-date-picker
                        v-model="CC.tableConfig.paramsTmp.date"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      >
                      </el-date-picker>
                    </span>
                  </div>
                  <div class="input-item fl">
                    <span class="span-input fl">
                      <el-button
                        type="primary"
                        @click="
                          () => {
                            ;(CC.isLoad = false), loadData()
                          }
                        "
                        >查询</el-button
                      >
                    </span>
                  </div>
                  <!-- <div class="input-item fr">
                            <span class="span-input fl">
                            <el-button type="primary" @click="ApplySearch">导入</el-button>
                            </span>
                        </div> -->
                  <!-- <div class="input-item fr">
                            <span class="span-input fl">
                            <el-button type="primary" @click="ApplySearch">导出</el-button>
                            </span>
                        </div> -->
                </div>
                <div class="content-table">
                  <Table
                    ref="Table"
                    :atone="false"
                    :columns="CC.tableConfig.columns"
                    :url="CC.tableConfig.url"
                    :pparams="CC.tableConfig.pparams"
                    @tableBubbling="TableBubbling"
                  ></Table>
                </div>
              </div>
              <!--我管辖的 Administer-->
              <div v-if="activeName == 4" class="administer">
                <div class="content-head">
                  <div class="input-item fl flex flex-y-center">
                    <span class="span-title fl">选择类型：</span>
                    <span class="span-input fl">
                      <el-select
                        v-model="Administer.tableConfig.pparams.typeIId"
                        clearable
                        placeholder="请选择类型"
                      >
                        <el-option
                          v-for="item in statusOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </span>
                  </div>
                  <div class="input-item fl flex flex-y-center">
                    <span class="span-title fl">选择状态：</span>
                    <span class="span-input fl">
                      <el-select
                        v-model="Administer.tableConfig.params.auditStatus"
                        placeholder="请选择状态"
                      >
                        <el-option
                          v-for="item in statusOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </span>
                  </div>
                  <div class="input-item fl flex flex-y-center">
                    <span class="span-title fl">提交时间：</span>
                    <span class="span-input fl">
                      <el-date-picker
                        v-model="Administer.tableConfig.paramsTmp.date"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      >
                      </el-date-picker>
                    </span>
                  </div>
                  <div class="input-item fl">
                    <span class="span-input fl">
                      <el-button
                        type="primary"
                        @click="
                          () => {
                            ;(Administer.isLoad = false), loadData()
                          }
                        "
                        >查询</el-button
                      >
                    </span>
                  </div>
                  <!-- <div class="input-item fr">
                            <span class="span-input fl">
                            <el-button type="primary" @click="FnExport">导出</el-button>
                            </span>
                        </div> -->
                </div>
                <div class="content-table">
                  <Table
                    ref="Table"
                    :atone="false"
                    :columns="Administer.tableConfig.columns"
                    :url="Administer.tableConfig.url"
                    :pparams="Administer.tableConfig.pparams"
                    @tableBubbling="TableBubbling"
                  ></Table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--自定义弹窗 申请弹窗-->
    <el-dialog
      :title="mask1.title"
      :visible.sync="mask1.showMask"
      :width="mask1.width"
      :before-close="
        () => {
          handleClose('mask1')
        }
      "
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="true"
      center
    >
      <div :class="{flex: mask1.inline}" class="content body flex-wrap">
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">申请人</span>
            <span class="span-input">
              <el-input
                v-model="mask1.data.workerName"
                :disabled="true"
                placeholder="请填写申请人"
              ></el-input>
            </span>
          </div>
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">所在部门</span>
            <span class="span-input">
              <el-select
                v-model="mask1.data.deptId"
                placeholder="请填写所在部门"
                @change="departmentChange"
              >
                <el-option
                  v-for="item in mask1.deptIdOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                >
                </el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">事由类型</span>
            <span class="span-input">
              <!-- <el-select
                        v-model="mask1.data.typeId"
                        placeholder="请选择事由类型"
                        @change="FnTypeChange"
                        >
                            <el-option
                            v-for="item in mask1.leaveTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select> -->
              <el-input
                :disabled="true"
                placeholder="请填写申请人"
                value="换班"
              ></el-input>
            </span>
          </div>
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">班次</span>
            <span class="span-input">
              <el-select v-model="mask1.data.classId" placeholder="请填写班次">
                <el-option
                  v-for="item in mask1.shiftsOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-start">
          <div class="flex flex-nowrap" style="width: 80%;">
            <span class="row-item-title required">换班原因</span>
            <span class="span-input" style="width: 80%;">
              <el-input
                v-model="mask1.data.reason"
                placeholder="请填写换班原因"
                type="textarea"
                rows="3"
              ></el-input>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">开始时间</span>
            <span class="span-input">
              <el-date-picker
                v-model="mask1.data.a"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                type="datetime"
                placeholder="请选择开始时间"
              >
              </el-date-picker>
            </span>
          </div>
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">结束时间</span>
            <span class="span-input">
              <el-date-picker
                v-model="mask1.data.b"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                type="datetime"
                placeholder="请选择结束时间"
              >
              </el-date-picker>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">审批人</span>
            <span class="span-input">
              <el-select
                v-model="mask1.data.auditNo"
                placeholder="请选择审批人"
              >
                <el-option
                  v-for="item in approvalOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </span>
          </div>
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title">抄送人</span>
            <span class="span-input">
              <el-select v-model="mask1.data.copyNo" placeholder="请选择抄送人">
                <el-option
                  v-for="item in CCOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap">
            <span class="row-item-title">附件</span>
            <span class="span-input">
              <el-upload
                ref="upload"
                :file-list="mask1.upLoad.fileList"
                :on-change="
                  (a, b) => {
                    FnChange('mask1', a, b)
                  }
                "
                :auto-upload="false"
                action="/nologin-api/HolidayApply/upload"
                list-type="picture-card"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                  <img
                    :src="file.url"
                    class="el-upload-list__item-thumbnail"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <!-- <span
                                    class="el-upload-list__item-preview"
                                    @click="handlePictureCardPreview(file)"
                                    >
                                    <i class="el-icon-zoom-in"></i>
                                    </span> -->
                    <!-- <span
                                    v-if="!mask1.upLoad.disabled"
                                    class="el-upload-list__item-delete"
                                    @click="handleDownload(file)"
                                    >
                                    <i class="el-icon-download"></i>
                                    </span> -->
                    <span
                      v-if="!mask1.upLoad.disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                    <span class="file-name">{{ file.name }}</span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="mask1.upLoad.dialogVisible">
                <img :src="mask1.upLoad.dialogImageUrl" width="100%" alt="" />
              </el-dialog>
            </span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer clearfix">
        <el-button @click="handleClose('mask1')">取 消</el-button>
        <el-button
          :loading="mask1.btnLoading"
          type="primary"
          @click="
            () => {
              FnSaveApply('mask1')
            }
          "
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!--自定义弹窗 审批弹窗-->
    <el-dialog
      :title="mask2.title"
      :visible.sync="mask2.showMask"
      :width="mask2.width"
      :before-close="
        () => {
          handleClose('mask2')
        }
      "
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="true"
      center
    >
      <div :class="{flex: mask2.inline}" class="content body flex-wrap">
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">申请人</span>
            <span class="span-input">
              <el-input
                v-model="mask2.data.workerName"
                :disabled="true"
                placeholder="请填写申请人"
              ></el-input>
            </span>
          </div>
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">所在部门</span>
            <span class="span-input">
              <el-select
                :disabled="true"
                v-model="mask2.data.deptId"
                placeholder="请填写所在部门"
                @change="departmentChange"
              >
                <el-option
                  v-for="item in mask2.deptIdOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                >
                </el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">事由类型</span>
            <span class="span-input">
              <el-input
                :disabled="true"
                placeholder="请填写申请人"
                value="换班"
              ></el-input>
            </span>
          </div>
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">班次</span>
            <span class="span-input">
              <el-select
                :disabled="true"
                v-model="mask2.data.classId"
                placeholder="请填写班次"
              >
                <el-option
                  v-for="item in mask2.shiftsOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-start">
          <div class="flex flex-nowrap" style="width: 80%;">
            <span class="row-item-title required">换班原因</span>
            <span class="span-input" style="width: 80%;">
              <el-input
                :disabled="true"
                v-model="mask2.data.reason"
                placeholder="请填写换班原因"
                type="textarea"
                rows="3"
              ></el-input>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">开始时间</span>
            <span class="span-input">
              <el-date-picker
                :disabled="true"
                v-model="mask2.data.a"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                type="datetime"
                placeholder="请选择开始时间"
              >
              </el-date-picker>
            </span>
          </div>
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">结束时间</span>
            <span class="span-input">
              <el-date-picker
                :disabled="true"
                v-model="mask2.data.b"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                type="datetime"
                placeholder="请选择结束时间"
              >
              </el-date-picker>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap">
            <span class="row-item-title">附件</span>
            <span class="span-input">
              {{ mask2.data.attachment ? '有附件' : '无附件' }}
              <i
                v-if="mask2.data.attachment"
                class="el-icon-download"
                style="color: blue; font-weight: bold; margin-left: 10px; cursor: pointer;"
                @click="FnDownFile(mask2.data.attachment)"
              ></i>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center" style="width: 80%;">
            <span class="row-item-title required">审批人</span>
            <span class="span-input" style="width: 70%;">
              <el-select
                :disabled="true"
                v-model="mask2.data.auditNo"
                placeholder="请选择审批人"
              >
                <el-option
                  v-for="item in approvalOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </span>
          </div>
          <div class="flex flex-nowrap flex-y-center" style="width: 80%;">
            <span class="row-item-title ">审批状态</span>
            <span class="span-input" style="width: 70%;">
              <el-select
                v-model="mask2.data.auditStatus"
                placeholder="请选择审批状态"
                @change="auditStatusChange"
              >
                <el-option :value="1" label="审批通过"></el-option>
                <el-option :value="2" label="审批驳回"></el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title ">审核人</span>
            <span class="span-input">
              <el-select
                :disabled="mask2.auditStatusDisabled"
                v-model="mask2.data.checkNo"
                placeholder="请选择审核人"
              >
                <el-option
                  v-for="item in checkOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap" style="width: 80%;">
            <span class="row-item-title ">审批意见</span>
            <span class="span-input" style="width: 80%;">
              <el-input
                v-model="mask2.data.auditOpinion"
                placeholder="请填写审批意见"
                type="textarea"
                rows="3"
              ></el-input>
            </span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer clearfix">
        <el-button
          @click="
            () => {
              handleClose('mask2')
            }
          "
          >取 消</el-button
        >
        <el-button
          :loading="mask2.btnLoading"
          type="primary"
          @click="
            () => {
              FnSaveApply('mask2')
            }
          "
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!--自定义弹窗 查看弹窗-->
    <el-dialog
      :title="mask3.title"
      :visible.sync="mask3.showMask"
      :width="mask3.width"
      :before-close="
        () => {
          handleClose('mask3')
        }
      "
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="true"
      center
    >
      <div :class="{flex: mask3.inline}" class="content body flex-wrap">
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">申请人</span>
            <span class="span-input">
              <el-input
                v-model="mask3.data.workerName"
                :disabled="true"
                placeholder="请填写申请人"
              ></el-input>
            </span>
          </div>
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">所在部门</span>
            <span class="span-input">
              <el-select
                :disabled="true"
                v-model="mask3.data.deptId"
                placeholder="请填写所在部门"
                @change="departmentChange"
              >
                <el-option
                  v-for="item in mask3.deptIdOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                >
                </el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">事由类型</span>
            <span class="span-input">
              <el-select
                :disabled="true"
                v-model="mask3.data.typeId"
                placeholder="请选择事由类型"
                @change="FnTypeChange"
              >
                <el-option :value="6" label="换班"></el-option>
              </el-select>
            </span>
          </div>
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">班次</span>
            <span class="span-input">
              <el-select
                :disabled="true"
                v-model="mask3.data.classId"
                placeholder="请填写班次"
              >
                <el-option
                  v-for="item in mask3.shiftsOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-start">
          <div class="flex flex-nowrap" style="width: 80%;">
            <span class="row-item-title">下班原因</span>
            <span class="span-input" style="width: 80%;">
              <el-input
                :disabled="true"
                v-model="mask3.data.reason"
                placeholder="请填写下班原因"
                type="textarea"
                rows="3"
              ></el-input>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">开始时间</span>
            <span class="span-input">
              <el-date-picker
                :disabled="true"
                v-model="mask3.data.a"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                type="datetime"
                placeholder="请选择开始时间"
              >
              </el-date-picker>
            </span>
          </div>
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title required">结束时间</span>
            <span class="span-input">
              <el-date-picker
                :disabled="true"
                v-model="mask3.data.b"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
                type="datetime"
                placeholder="请选择结束时间"
              >
              </el-date-picker>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center" style="width: 80%;">
            <span class="row-item-title required">审批人</span>
            <span class="span-input" style="width: 70%;">
              <el-select
                :disabled="true"
                v-model="mask3.data.auditNo"
                placeholder="请选择审批人"
              >
                <el-option
                  v-for="item in approvalOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </span>
          </div>
          <div class="flex flex-nowrap flex-y-center" style="width: 80%;">
            <span class="row-item-title ">审批状态</span>
            <span class="span-input" style="width: 70%;">
              <el-select
                :disabled="true"
                v-model="mask3.data.auditStatus"
                placeholder="请选择审批状态"
              >
                <el-option :value="1" label="审批通过"></el-option>
                <el-option :value="2" label="审批驳回"></el-option>
                <el-option :value="0" label="未审批"></el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap flex-y-center">
            <span class="row-item-title ">审核人</span>
            <span class="span-input">
              <el-select
                :disabled="true"
                v-model="mask3.data.checkNo"
                placeholder="请选择审核人"
              >
                <el-option
                  v-for="item in checkOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap" style="width: 80%;">
            <span class="row-item-title ">审批意见</span>
            <span class="span-input" style="width: 80%;">
              <el-input
                :disabled="true"
                v-model="mask3.data.auditOpinion"
                placeholder="请填写审批意见"
                type="textarea"
                rows="3"
              ></el-input>
            </span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between flex-y-center">
          <div v-if="mask1.data.restTimeStr" class="flex flex-nowrap">
            <span class="row-item-title">剩余假期</span>
            <span class="span-input">{{ mask1.data.restTimeStr }}</span>
          </div>
        </div>
        <div class="row-item flex clearfix flex-between">
          <div class="flex flex-nowrap">
            <span class="row-item-title">附件</span>
            <span class="span-input">
              {{ mask3.data.attachment ? '有附件' : '无附件' }}
              <i
                v-if="mask3.data.attachment"
                class="el-icon-download"
                style="color: blue; font-weight: bold; margin-left: 10px; cursor: pointer;"
                @click="FnDownFile(mask3.data.attachment)"
              ></i>
            </span>
          </div>
        </div>
      </div>
      <!-- <span slot="footer" class="dialog-footer clearfix">
            <el-button @click="handleClose('mask3')">取 消</el-button>
            <el-button :loading="mask3.btnLoading" type="primary" @click="FnSaveApply">确 定</el-button>
        </span> -->
    </el-dialog>
  </div>
</template>
<script>
import Table from '@/components/table.vue'
import mixins from '@/const/mixins'
import {holiday} from '@/const/api'

export default {
  name: 'SD',
  components: {
    Table,
  },
  mixins: [mixins],
  data() {
    return {
      activeName: '1',
      Apply: {
        isLoad: false, // 是否加载过该容器的数据
        tableConfig: {
          url: '/HolidayApply/getApplyList',
          columns: [
            {
              dataIndex: 'typeName',
              title: '类型',
            },
            {
              dataIndex: 'workerName',
              title: '申请人',
            },
            {
              dataIndex: 'dateTimeStart',
              title: '开始时间',
            },
            {
              dataIndex: 'dateTimeEnd',
              title: '结束时间',
            },
            {
              dataIndex: 'reason',
              title: '换班原因',
            },
            {
              dataIndex: 'applyTime',
              format: 'date',
              title: '申请时间',
            },
            {
              type: 'meiju',
              dataIndex: 'auditStatus',
              title: '状态',
              meiju: {
                '0': '未审核',
                '1': '审核通过',
                '2': '审核驳回',
              },
            },
            {
              align: 'center',
              dataIndex: ['details'],
              title: '操作',
            },
          ],
          params: {
            typeId: 6,
            auditStatus: -1,
          },
          pparams: {},
          paramsTmp: {
            date: null,
          },
        },
      },
      Approval: {
        isLoad: false, // 是否加载过该容器的数据
        departmentOptions: [],
        tableConfig: {
          url: '/HolidayApply/getApplyList',
          columns: [
            {
              dataIndex: 'typeName',
              title: '类型',
            },
            {
              dataIndex: 'workerName',
              title: '申请人',
            },
            {
              dataIndex: 'dateTimeStart',
              title: '开始时间',
            },
            {
              dataIndex: 'dateTimeEnd',
              title: '结束时间',
            },
            {
              dataIndex: 'reason',
              title: '换班原因',
            },
            {
              dataIndex: 'applyTime',
              format: 'date',
              title: '申请时间',
            },
            {
              type: 'meiju',
              dataIndex: 'auditStatus',
              title: '状态',
              meiju: {
                '0': '未审核',
                '1': '审核通过',
                '2': '审核驳回',
              },
            },
            {
              align: 'center',
              dataIndex: ['approval'],
              title: '操作',
            },
          ],
          params: {
            typeId: 6,
            auditStatus: -1,
          },
          pparams: {},
          paramsTmp: {
            date: null,
          },
        },
      },
      CC: {
        isLoad: false, // 是否加载过该容器的数据
        departmentOptions: [],
        tableConfig: {
          url: '/HolidayApply/getApplyList',
          columns: [
            {
              dataIndex: 'typeName',
              title: '类型',
            },
            {
              dataIndex: 'workerName',
              title: '申请人',
            },
            {
              dataIndex: 'dateTimeStart',
              title: '开始时间',
            },
            {
              dataIndex: 'dateTimeEnd',
              title: '结束时间',
            },
            {
              dataIndex: 'reason',
              title: '换班原因',
            },
            {
              dataIndex: 'applyTime',
              format: 'date',
              title: '申请时间',
            },
            {
              type: 'meiju',
              dataIndex: 'auditStatus',
              title: '状态',
              meiju: {
                '0': '未审核',
                '1': '审核通过',
                '2': '审核驳回',
              },
            },
            {
              align: 'center',
              dataIndex: ['details'],
              title: '操作',
            },
          ],
          params: {
            typeId: 6,
            auditStatus: -1,
          },
          pparams: {},
          paramsTmp: {
            date: null,
          },
        },
      },
      Administer: {
        isLoad: false, // 是否加载过该容器的数据
        departmentOptions: [],
        tableConfig: {
          url: '/HolidayApply/getApplyList',
          columns: [
            {
              dataIndex: 'typeName',
              title: '类型',
            },
            {
              dataIndex: 'workerName',
              title: '申请人',
            },
            {
              dataIndex: 'dateTimeStart',
              title: '开始时间',
            },
            {
              dataIndex: 'dateTimeEnd',
              title: '结束时间',
            },
            {
              dataIndex: 'reason',
              title: '换班原因',
            },
            {
              dataIndex: 'applyTime',
              format: 'date',
              title: '申请时间',
            },
            {
              type: 'meiju',
              dataIndex: 'auditStatus',
              title: '状态',
              meiju: {
                '0': '未审核',
                '1': '审核通过',
                '2': '审核驳回',
              },
            },
            {
              align: 'center',
              dataIndex: ['details', 'check', 'adjustment'],
              title: '操作',
              width: 250,
            },
          ],
          params: {
            typeId: 6,
            auditStatus: -1,
          },
          pparams: {},
          paramsTmp: {
            date: null,
          },
        },
      },
      // 申请弹窗
      mask1: {
        title: '',
        showMask: false,
        data: {},
        width: '42%',
        btnLoading: false,
        shiftsOptions: [],
        upLoad: {
          fileList: [],
          dialogImageUrl: '',
          dialogVisible: false,
          disabled: false,
        },
      },
      // 审批弹窗
      mask2: {
        title: '',
        showMask: false,
        data: {},
        width: '42%',
        btnLoading: false,
        shiftsOptions: [],
        upLoad: {
          fileList: [],
          dialogImageUrl: '',
          dialogVisible: false,
          disabled: false,
        },
      },
      // 查看弹窗
      mask3: {
        title: '',
        showMask: false,
        data: {},
        width: '42%',
        btnLoading: false,
        shiftsOptions: [],
        upLoad: {
          fileList: [],
          dialogImageUrl: '',
          dialogVisible: false,
          disabled: false,
        },
      },
      // 审核弹窗
      mask4: {
        title: '',
        showMask: false,
        data: {},
        width: '42%',
        btnLoading: false,
        shiftsOptions: [],
        upLoad: {
          fileList: [],
          dialogImageUrl: '',
          dialogVisible: false,
          disabled: false,
        },
      },
      // 调整弹窗
      mask5: {
        title: '',
        showMask: false,
        data: {},
        width: '42%',
        btnLoading: false,
        shiftsOptions: [],
        upLoad: {
          fileList: [],
          dialogImageUrl: '',
          dialogVisible: false,
          disabled: false,
        },
      },
      statusOptions: [
        {
          label: '查询所有',
          value: -1,
        },
        {
          label: '审核未通过',
          value: 0,
        },
        {
          label: '审核通过',
          value: 1,
        },
        {
          label: '审核驳回',
          value: 2,
        },
      ],
      approvalOptions: [],
      leaveTypeOptions: [],
      checkOptions: [],
      causeOptions: [],
      CCOptions: [],
      upLoad: {
        fileList: [],
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
      },
      container: false,
      containerArr: ['Apply', 'Approval', 'CC', 'Administer'],
      timeStart: new Date(),
    }
  },
  computed: {
    user() {
      return this.$store.state
    },
  },
  created() {
    window._this = this

    this.getDepartmentList(0) // 获取部门列表
    
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      // 根1据activeName加载对应tab数据
      let activeName = this.activeName
      let container = (this.container = this[
        this.containerArr[activeName * 1 - 1]
      ]) // 拿 tab con 进行操作
      let workerNo = this.user.workNumber

      delete container.tableConfig.pparams.workerNo // 删除申请人工号
      delete container.tableConfig.pparams.checkNo // 删除审核人工号
      delete container.tableConfig.pparams.copyNo // 删除抄送人工号
      delete container.tableConfig.pparams.checauditNokNo // 删除审批人工号

      container.tableConfig.pparams = JSON.parse(
        JSON.stringify(container.tableConfig.params),
      )

      //   !container.tableConfig.pparams.typeIId ? (container.tableConfig.pparams.typeId = -2) : (container.tableConfig.pparams.typeId = container.tableConfig.pparams.typeIId)

      container.tableConfig.paramsTmp.date &&
        (container.tableConfig.pparams.applyStartTime = this.$utils.parseTime(
          container.tableConfig.paramsTmp.date[0],
        ))
      container.tableConfig.paramsTmp.date &&
        (container.tableConfig.pparams.applyEndTime = this.$utils.parseTime(
          container.tableConfig.paramsTmp.date[1],
        ))
      container.tableConfig.pparams.pageNum = 1

      console.log(activeName, 'activeName')
      if (activeName == 1 && !this.container.isLoad) {
        // 我申请的
        container.tableConfig.pparams.workerNo = workerNo
        setTimeout(() => {
          this.$refs['Table'].fetchList(true)
        }, 100)
      } else if (activeName == 2 && !this.container.isLoad) {
        // 我审批的
        container.tableConfig.pparams.checauditNokNo = workerNo
        setTimeout(() => {
          this.$refs['Table'].fetchList(true)
        }, 100)
      } else if (activeName == 3 && !this.container.isLoad) {
        // 我抄送的
        container.tableConfig.pparams.copyNo = workerNo
        setTimeout(() => {
          this.$refs['Table'].fetchList(true)
        }, 100)
      } else if (activeName == 4 && !this.container.isLoad) {
        // 我管辖的
        container.tableConfig.pparams.checkNo = workerNo
        setTimeout(() => {
          this.$refs['Table'].fetchList(true)
        }, 100)
      }
      //   this.container.isLoad = true
    },
    // 通用申请 三个tab占有
    FnApply() {
      this.mask1.showMask = true
      this.mask1.id = false
      this.mask1.title = '换班申请'
      this.mask1.shiftsOptions = []
      this.approvalOptions = []
      this.checkOptions = []
      this.CCOptions = []
      this.mask1.data = {
        typeId: '', // 事由原因id
        deptId: '', // 部门id
        classId: '', // 班次id
        reason: '', // 请假原因
        timeStart: '', // 开始时间
        timeEnd: '', // 结束时间
        dayStart: '', // 开始日期
        dayEnd: '', // 结束日期
        auditNo: '', // 审批人
        copyNo: '', // 抄送人
        freeTime: 0, // 计算请假时长
        restTimeStr: 0, // 剩余假期时长
        useFree: '0', // 是否使用剩余假期
        attachment: '', // 图片集
        workerName: this.user.username,
      }
    },
    async FnSaveApply(key) {
      let timeStart = this.timeStart
      let timeEnd = new Date()

      if (timeEnd - timeStart >= 1500) {
        // 防止频繁操作
        this.timeStart = timeEnd
        let formData = new FormData()
        let mask = this[key]
        let params = JSON.parse(JSON.stringify(mask.data))
        let originData = mask.data
        let saveRes
        params.dayStart = this.$utils.parseTime(params.a).split(' ')[0]
        params.dayEnd = this.$utils.parseTime(params.b).split(' ')[0]
        params.timeStart = this.$utils.parseTime(params.a).split(' ')[1]
        params.timeEnd = this.$utils.parseTime(params.b).split(' ')[1]
        params.checkNo = params.checkNo ? params.checkNo : 0
        params.copyNo = params.copyNo ? params.copyNo : 0
        params.typeId = 6
        params.a = new Date(params.a)
        params.b = new Date(params.b)

        if (key == 'mask1') {
          // 申请的保存
          if (!params.deptId) return this.$Message.error('请填写部门')
          if (!params.typeId) return this.$Message.error('请填写事由类型')
          if (!params.classId) return this.$Message.error('请填写班次')
          if (!params.reason) return this.$Message.error('请填写下班原因')
          if (!params.a) return this.$Message.error('请填写开始时间')
          if (!params.b) return this.$Message.error('请填写结束时间')
          if (params.b - params.a < 0)
            return this.$Message.error('开始时间大于结束时间')
          if (params.b - params.a == 0)
            return this.$Message.error('开始时间不能等于结束时间')
          if (!params.auditNo) return this.$Message.error('请填写审批人')

          // 有文件 先上传
          if (mask.upLoad.fileList.length) {
            mask.btnLoading = true
            mask.upLoad.fileList.forEach((n1, i1) => {
              formData.append('file', n1.raw, n1.raw.name)
            })
            let upLoadRes = await this.$axios.post(
              '/HolidayApply/upload',
              formData,
              {headers: {'Content-Type': 'multipart/form-data'}},
            )

            if (upLoadRes.data.state == this.ResCode) {
              params.attachment = upLoadRes.data.data
              this.$Message.success('图片上传成功')
            } else {
              this.$Message.error('图片上传失败')
            }
          }
          mask.btnLoading = true
          params.workerNo = this.user.workNumber
          delete params.a
          delete params.b
          saveRes = await this.$axios.$get(holiday('addOrUpdateApply'), {
            params,
          })
          if (saveRes.state == this.ResCode) {
            this.$Message.success('保存成功')
            setTimeout(() => {
              this.$refs['Table'].fetchList()
              this.mask1.deptIdOptions = []
              this.mask1.shiftsOptions = []
            }, 100)
          } else {
            this.$Message.error(saveRes.msg)
          }
          mask.showMask = false
          mask.btnLoading = false
        } else if (key == 'mask2') {
          // 审核的保存
          saveRes = await this.$axios.$get(holiday('addOrUpdateApply'), {
            params,
          })
          if (saveRes.state == this.ResCode) {
            this.$Message.success('保存成功')
            setTimeout(() => {
              this.$refs['Table'].fetchList()
            }, 100)
          } else {
            this.$Message.error(saveRes.msg)
          }
          mask.showMask = false
          mask.btnLoading = false
        }
      }
    },
    TableBubbling(e) {
      let type = e.type
      let content = e.content ? JSON.parse(JSON.stringify(e.content)) : false
      let mask = this.mask
      if (type == 'approval') {
        // 审批
        this.getEmployeeVo(e.content.deptId, 1) // 获取申请人
        this.getEmployeeVo(e.content.deptId, 2) // 获取审核 获取审批
        this.getShiftsList(e.content.deptId) // 获取班次列表
        mask = this.mask2
        mask.showMask = true
        mask.title = '连休审批'
        mask.data = JSON.parse(JSON.stringify(e.content))
        mask.data.a = e.content.dateTimeStart
        mask.data.b = e.content.dateTimeEnd
        mask.data.checkNo = ''
        mask.data.checkName = ''
        mask.data.auditStatus =
          mask.data.auditStatus == 0 ? 1 : mask.data.auditStatus
        mask.auditStatusDisabled = false // 默认为审核通过 所以审核人可选
      } else if (type == 'details') {
        // 查看
        this.getEmployeeVo(e.content.deptId, 1) // 获取申请人
        this.getEmployeeVo(e.content.deptId, 2) // 获取审核 获取审批
        this.getShiftsList(e.content.deptId) // 获取班次列表
        //   this.getRestTime(e.content.workerNo)    // 获取申请人剩余假期

        mask = this.mask3
        mask.title = '申请详情'
        mask.showMask = true
        mask.data = JSON.parse(JSON.stringify(e.content))
        mask.data.a = e.content.dateTimeStart
        mask.data.b = e.content.dateTimeEnd
        mask.classId = e.content.className
      }
    },
    ApplySearchAdd() {
      this.mask.showMask = true
      this.mask.title = '添加员工'
    },
    handleClose(key) {
      this[key].showMask = false
    },
    departmentChange(e) {
      this.getShiftsList(e)
      this.getEmployeeVo(e, 2) // 获取审核人 获取审批人
    },
    FnChange(key, a, b) {
      this[key].upLoad.fileList = b
    },
    handleRemove(file) {
      this.mask1.upLoad.fileList = this.mask1.upLoad.fileList.filter(
        n1 => file.name != n1.name,
      )
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    },
    FnDownFile(file) {
      console.log(`${this.EXPORTURL}/HolidayApply/download?filePath=${file}`)
      window.open(
        `${this.EXPORTURL}/HolidayApply/download?filePath=${encodeURI(file)}`,
      )
    },
    FnExport() {
      let params = JSON.parse(
        JSON.stringify(this.container.tableConfig.pparams),
      )
      let str = ''
      params.startDay = params.date
        ? this.$utils.parseTime(params.date[0], '{y}-{m}-{d}')
        : ''
      params.endDay = params.date
        ? this.$utils.parseTime(params.date[1], '{y}-{m}-{d}')
        : ''
      delete params.date
      Object.keys(params).forEach((n1, i1) => {
        params[n1] && (str += n1 + '=' + params[n1] + '&')
      })
      console.log(str, '123')
      window.open(
        `${this.EXPORTURL}/HolidayApply/exportApply?${str.substr(
          0,
          str.length - 1,
        )}`,
      )
    },
    auditStatusChange(e) {
      let mask = this.mask2
      if (e == 2) {
        // 选择了审批不通过 至灰审核人
        mask.auditStatusDisabled = true
        mask.data.checkNo = ''
        mask.data.checkName = ''
      } else {
        // 选择了审批通过   可选择审核人
        mask.auditStatusDisabled = false
      }
    },
  },
}
</script>

<style lang="less">
.SD {
  .content-content-top {
    padding-top: 14px;
    font-weight: bold;
  }

  .row-item {
    padding-bottom: 14px;

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 190px !important;
    }

    & > div {
      margin-right: 14px;

      &:last-child {
        margin-right: 0;
      }
    }

    .el-upload-list--picture-card .el-upload-list__item-actions span + span {
      margin-left: 2px;
    }

    .el-upload--picture-card {
      width: 100px !important;
      height: 100px !important;
      line-height: 108px !important;
    }

    .el-upload-list__item {
      width: 100px !important;
      height: 100px !important;
      line-height: 50px !important;
    }

    .file-name {
      position: absolute;
      bottom: 10px;
      left: 0;
      right: 0;
      height: 20px;
      line-height: 20px;
      text-align: center;
      color: #fff;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .row-item-title {
    box-sizing: border-box;
    position: relative;
    padding-right: 5px;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &::after {
      content: ':';
      font-weight: bold;
    }

    &.required::before {
      content: '*';
      font-weight: bold;
      color: red;
    }
  }
}
</style>
